<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>水路信息</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<style type="text/css">
			body {
				background-color: #F0F0F0;
			}
			#boat_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
			}
			
			.app_head_left {
				float: left;
				width: 30%;
				padding-top: 6px;
				padding-left: 6px;
			}
			
			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}
			
			.app_head_mid {
				float: left;
				width: 40%;
				padding-top: 5px;
			}
			
			#app_head_title {
				text-align: center;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
				font-weight: bold;
			}
			
			.weui_bar_item_on {
				background-color: #FFFFFF !important;
				color: #0070B4 !important;
			}
			
			.weui_navbar_item {
				color: #FFFFFF;
				background-color: #CCCCCC;
			}
			
			.weui_navbar_item b {
				display: block;
				height: 2em;
				line-height: 2em;
				border-right: 1px solid #FFFFFF;
			}
			
			.weui_tab_bd_item {
				margin-top: 4px;
			}
			
			.weui_top_grey {
				margin-top: 55px;
				height: 6px;
				background-color: #F5F5F5;
			}
			
			.weui_tab {
				margin-top: 16px;
			}
			/* 搜索框区域样式 */
			
			.sec_line {
				width: 100%;
				background-color: #F5F5F5;
				padding: 5px 0px 7px 0;
				border-bottom: 1px solid #DEDEDE;
			}
			
			#InputLine {
				margin-left: 2%;
				margin-right: 2%;
				width: 96%;
				border: 1px solid #DEDEDE;
				border-radius: 7px;
				height: 44px;
				background-color: #FFFFFF;
				opacity: 0.92;
			}
			
			#boat_suggestId {
				padding-left: 1em;
				width: 89%;
				height: 100%;
				border: none;
				outline: medium;
				border-radius: 5px;
				color: #969696;
				font-size: 1.15em;
				font-weight: bold;
			}
			
			#searchBtn {
				display: block;
				float: right;
				width: 8.5%;
				padding-right: 10px;
				color: #666666;
				font-size: 2em;
				text-align: right;
				position: relative;
				left: -5px;
			}
			/* ul li 列表样式 */
			
			#boatPlace_Ul {
				/*padding: 0 10px;*/
				background-color: #FFFFFF;
			}
			
			#boatPlace_Ul li {
				color: #666666;
				padding: 10px;
				padding-left: 15px;
				font-weight: bold;
			}
			
			#boatPlace_Ul li:nth-child(2n) {
				color: #FFFFFF;
			}
			
			#noResult {
				width: 80%;
				margin-left: 10%;
				margin-right: 10%;
				margin-top: 90px;
				color: #999999;
				font-size: 2em;
				text-align: center;
			}
			/* loading样式 */
			
			#loadingSFZ {
				width: 8%;
				margin-left: 46%;
				margin-right: 46%;
				margin-top: 90px;
			}
			/* 返回顶部按钮 */
			
			.returnTopBtn {
				position: fixed;
				right: 15px;
				bottom: 80px;
				width: 45px;
				height: 43px;
				border-radius: 8px;
				z-index: 9999;
				background-color: #CCCCCC;
				padding: 6px;
			}
			/*搜索结果标题 车站名称*/
			
			.boatMsgP {
				padding: 10px;
			}
			
			#boatJumpToMap {
				padding-left: 8px;
				margin-top: -15px;
				height: 40px;
			}
			
			#boatJumpToMap a {
				position: relative;
				top: 4px;
			}
			
			#boatMainMsg {
				background-image: url(img/bg/boatBG.png);
				background-repeat: no-repeat;
				background-size: 100% 145%;
				background-position: 20% 110%;
			}
			
			#boatMsgArea {
				padding: 15px;
			}
			/*水运首页按钮*/
			
			#boat_btn_page {
				margin-top: 70px;
				padding-top: 25%;
				width: 100%;
				background-image: url(img/bg/boatBG.png);
				background-repeat: no-repeat;
				background-size: 100% 145%;
				background-position: 20% 110%;
			}
			
			.boat_btn_btn {
				display: block;
				width: 40%;
				/*border: 1px solid;*/
				border-radius: 6px;
				text-align: right;
				font-size: 1.3em;
				font-weight: bold;
				padding-right: 10%;
				height: 50px;
				line-height: 50px;
				background-repeat: no-repeat;
				background-size: 40% 100%;
				background-position: 10% 100%;
				box-shadow: 3px 4px 4px #666666;
				background-color: #FFFFFF;
			}
			
			._cb {
				background-image: url(img/boat/Icon_cb.png);
				color: #006FB5;
				background-size: 45% 100% !important;
			}
			
			._gk {
				background-image: url(img/boat/Icon_gangkou.png);
				color: #0BB501;
			}
			
			._mt {
				background-image: url(img/boat/Icon_mt.png);
				color: #FFB500;
			}
		</style>
	</head>
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=MMh4H9m5FLBpizlht86GnGynuaM0oGKz"></script>

	<body ontouchstart>
		<div id="boat_main">
			<div class="index_head" id="firTitle">
				<div class="app_head_left">
					<a class="iconfont" id="boat_returnBtn">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">水运信息</p>
				</div>
				
			</div>
			<!--水运信息首页-->
			<div id="boat_btn_page">
				<a class="boat_btn_btn _cb" onclick="showBoatMsg(this)">
					船舶
				</a>
				<a class="boat_btn_btn _gk mt50" onclick="showBoatMsg(this)">
					港口
				</a>
				<a class="boat_btn_btn _mt mt50" onclick="showBoatMsg(this)">
					码头
				</a>
			</div>
			<!--水运信息二级页-->
			<div class="weui_tab" style="display: none;" id="msg_page">
				<!--选择步行公交自驾按钮区域-->
				<div class="weui_navbar" id="secTitle">
					<a href="#boatListSearch" class="weui_navbar_item weui_bar_item_on" id="boatListBtn">
						<b>列表查询</b>
					</a>
					<a href="#boatMainMsg" class="weui_navbar_item" id="boatMainMsgBtn">
						<b>详细信息</b>
					</a>
				</div>
				<div class="weui_tab_bd">
					<div id="boatListSearch" class="weui_tab_bd_item weui_tab_bd_item_active">
						<div class="sec_line">
							<div id="InputLine">
								<input type="text" id="boat_suggestId" size="20" />
								<!--<a id="delBtn" href="javascript:;" class="iconfont" style="display: none;">&#xe60b;</a>-->
								<a id="searchBtn" href="javascript:;" class="iconfont">&#xe709;</a>
							</div>
						</div>
						<ul id="boatPlace_Ul">
							<!--<li>净月潭国家森林公园</li>
								<li>长影世纪城</li>
								<li>动植物公园</li>-->
						</ul>
						<img src="img/taxi/loading_icon_1.gif" id="loadingSFZ" style="display: none;" />
						<h1 id="noResult" style="display: none;">搜索无结果</h1>
					</div>
					<div id="boatMainMsg" class="weui_tab_bd_item">
						<!--<div id="allmap"></div>-->
						<!--详细信息区域层-->
						<div id="boatMsgArea" style="display: none;">
							<!--style="display: none;"-->
							<p id="bName" class="boatMsgP f18"></p>
							<p data-type="" data-x="" data-y="" style="color: royalblue; font-size: 16px;" id="boatJumpToMap" onclick="boatJumpToMapShow(this)">
								<a class="iconfont" style="color: royalblue; font-size: 1.8em;">&#xe6c9;</a>点击跳转至地图查看</p>
							<p id="areaName" class="boatMsgP f15"></p>
							<p id="bAdmin" class="boatMsgP f15"></p>
							<p id="bRiver" class="boatMsgP f15"></p>
							<p id="bUse" class="boatMsgP f15"></p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<img src="img/index/returnTop2.png" style="display: none;" class="returnTopBtn" />
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function showBoatMsg(t) {
				var searchType;
				var title = $("#app_head_title");
				$("#boat_btn_page").hide();
				$("#msg_page").show();
				$("#boatListBtn").click(); //每次点击进入专项查询先到列表搜索
				if(t.innerHTML.indexOf("船舶") > -1) {
					searchType = "ship_fixed_info";
					title.html("船舶信息");
					//					getBoatList(searchType);
					$("#boat_suggestId").attr("placeholder", "请输入船舶停靠点名称");
				} else if(t.innerHTML.indexOf("港口") > -1) {
					searchType = "terminal_info";
					title.html("港口信息");
					//					getBoatList(searchType);
					$("#boat_suggestId").attr("placeholder", "请输入港口名称");
				} else {
					searchType = "dock_info";
					title.html("码头信息");
					//					getBoatList(searchType);
					$("#boat_suggestId").attr("placeholder", "请输入码头名称");
				}
				//				console.log(searchType);
				getBoatList(searchType);
			}

			//左上角返回按钮
			$("#boat_returnBtn").click(function() {
				var boatIndex = document.getElementById("boat_btn_page");
				if(boatIndex.style.display == "block") {
					window.location.href = "javascript:history.go(-1)";
				} else {
					$("#boat_suggestId").val("");
					if($("#boatListBtn").hasClass("weui_bar_item_on")) {
						$("#msg_page").hide();
						boatIndex.style.display = "block";
						$("#app_head_title").html("水运信息");
					} else {
						$("#boatListBtn").click();
					}
				}
			});
			//			//港口信息
			//type = terminal_info
			//TERMINAL = 港口名称（模糊查）
			//AREA = 区域名(模糊查)
			////码头信息
			//type = dock_info
			//DOCKNAME = 码头名称（模糊查）
			//AREA = 区域名(模糊查)
			//			var map = new BMap.Map("allmap");

			$(function() {
				var h = document.documentElement.clientHeight;
				$("#boatMainMsg").height(h - 75);
				$("#boat_btn_page").height(h - 173);
			});

			function getBoatList(searchType) {
				$("#loadingSFZ").show();
				$("#boatPlace_Ul").html("");
				$.ajax({
					type: "post",
					url: Url,
					data: {
						type: searchType, //获取船舶固定停靠点信息
						PORTNAME: $("#boat_suggestId").val(), //停靠点名称
						TERMINAL: $("#boat_suggestId").val(),
						DOCKNAME: $("#boat_suggestId").val()
						//						AREA: "" //区域名
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						$("#noResult").hide();
						$("#loadingSFZ").hide();
						if(data.CODE == 1) {
//							console.log(data);
							var d = data.DATA;
							var m = data.MDATA;
							if(isEncrypt(d, m)) {
								var b = eval(d);
								if(searchType == "ship_fixed_info") { //船舶停靠点
									for(var i = 0; i < b.length; i++) {
										var area = b[i].AFFILIATINGAREA; //所在市州
										var positionX = b[i].LATITUDE; //纬度
										var positionY = b[i].LONGITUDE; //经度
										var name = b[i].NAMEOFBERTHPLACE; //泊位名称
										var admin = b[i].SUBORDINATEMANAGEMENT; //所属管理机构
										var river = b[i].THERIVERSNAME; //所属水域
										var use = b[i].USE; //功能（如 船舶停靠）
										//循环添加DOM至ul中
										var li = $('<li data-nn="1" data-admin="' + admin + '" data-use="' + use + '" data-river="' + river + '" data-X="' + positionX + '" data-Y="' + positionY + '" onclick="jumpToBoatMsg(this)">' + name + ' （' + area + '）' + '</li>');
										$("#boatPlace_Ul").append(li);
										$("#boatPlace_Ul li:nth-child(2n)").css("background-color", "#006FB5"); //隔行li背景色
									}
								} else if(searchType == "terminal_info") { //港口
									for(var i = 0; i < b.length; i++) {
										var area = b[i].AREA; //所在市州
										var positionX = b[i].LATITUDE; //纬度
										var positionY = b[i].LONGITUDE; //经度
										var name = b[i].NAME; //港口名称
										var phone = b[i].PHONE;
										//循环添加DOM至ul中
										var li = $('<li data-nn="2" data-phone="' + phone + '" data-X="' + positionX + '" data-Y="' + positionY + '" onclick="jumpToBoatMsg(this)">' + name + ' （' + area + '）' + '</li>');
										$("#boatPlace_Ul").append(li);
										$("#boatPlace_Ul li:nth-child(2n)").css("background-color", "#0BB501"); //隔行li背景色
									}
								} else { //码头
									for(var i = 0; i < b.length; i++) {
										var area = b[i].AREA; //所在市州
										var positionX = b[i].LATITUDE; //纬度
										var positionY = b[i].LONGITUDE; //经度
										var name = b[i].NAME; //港口名称
										var man = b[i].LINKMAN;
										//循环添加DOM至ul中
										var li = $('<li data-nn="3" data-man="' + man + '" data-X="' + positionX + '" data-Y="' + positionY + '" onclick="jumpToBoatMsg(this)">' + name + ' （' + area + '）' + '</li>');
										$("#boatPlace_Ul").append(li);
										$("#boatPlace_Ul li:nth-child(2n)").css("background-color", "#FFB500"); //隔行li背景色
									}
								}
							}else{
								errMD();
							}
						} else {
							$("#noResult").show();
						}
					},
					error: function(data) {
						$.alert("连接超时，请稍后再试", "提示");
					}
				});
			};
			//判断滚动条是否在顶部 并显示返回顶部图标
			window.onscroll = function() {
				var scroll_top = $(document).scrollTop();
				if(scroll_top != 0) {
					$(".returnTopBtn").show();
				} else if(scroll_top == 0) {
					$(".returnTopBtn").hide();
				}
			}
			//每当点击地图按钮的时候，页面都返回顶部
			$("#chooseMap").click(function() {
				$(window).scrollTop(0);
			});
			$(".returnTopBtn").click(function() {
				//				$(window).scrollTop(0);
				$("body").animate({
					scrollTop: 0
				}, 300)
			});

			//输入框输入信息触发事件
			var timeout;
			$("#boat_suggestId").keyup(function() {
				$("#loadingSFZ").show();
				$("#noResult").hide();
				//输入框内容为空时 ul中显示所有收费站名称
				$("#boatPlace_Ul").html(""); //清空所有li
				clearTimeout(timeout);
				timeout = setTimeout("boatInputTS()", 1000);
			});

			//方法：输入框输入信息模糊查询
			function boatInputTS() {
				var searchType;
				$("#boatPlace_Ul").html(""); //清空所有li
				if($("#boat_suggestId").attr("placeholder").indexOf("船舶") > -1) {
					searchType = "ship_fixed_info";
				} else if($("#boat_suggestId").attr("placeholder").indexOf("港口") > -1) {
					searchType = "terminal_info";
				} else {
					searchType = "dock_info";
				}
				getBoatList(searchType);
			};

			//点击列表跳转至详情
			function jumpToBoatMsg(t) {
				if($(t).attr("data-nn") == 1) {
					var name = $(t).html().split(' ')[0]; //泊位名称
					var area = $(t).html().split(' ')[1]; //所在市州
					area = area.replace("（", "").replace("）", ""); //去除所在市州字符串中的括号
					var positionX = $(t).attr("data-X"); //纬度
					var positionY = $(t).attr("data-Y"); //经度
					var admin = $(t).attr("data-admin"); //所属管理机构
					var river = $(t).attr("data-river"); //所属水域
					var use = $(t).attr("data-use"); //功能（如 船舶停靠）

					$("#boatMsgArea").show(); //显示信息层
					$("#bName").html(name);
					$("#areaName").html("所属市州：  " + area);
					$("#bAdmin").html("所属管理机构：  " + admin);
					$("#bRiver").html("所属水域：  " + river);
					$("#bUse").html("功能：  " + use);
					$("#boatJumpToMap").attr("data-x", positionX);
					$("#boatJumpToMap").attr("data-y", positionY);
					$("#boatJumpToMap").attr("data-type", "1"); //类型：船舶停靠点
				} else if($(t).attr("data-nn") == 2) {
					var name = $(t).html().split(' ')[0]; //泊位名称
					var area = $(t).html().split(' ')[1]; //所在市州
					area = area.replace("（", "").replace("）", ""); //去除所在市州字符串中的括号
					var positionX = $(t).attr("data-X"); //纬度
					var positionY = $(t).attr("data-Y"); //经度
					var phone = $(t).attr("data-phone"); //电话

					$("#boatMsgArea").show(); //显示信息层
					$("#bName").html(name);
					$("#areaName").html("所属市州：  " + area + "市");
					$("#bAdmin").html("联系电话：  " + phone);
					$("#boatJumpToMap").attr("data-x", positionX);
					$("#boatJumpToMap").attr("data-y", positionY);
					$("#boatJumpToMap").attr("data-type", "2"); //类型：港口
				} else if($(t).attr("data-nn") == 3) {
					var name = $(t).html().split(' ')[0]; //泊位名称
					var area = $(t).html().split(' ')[1]; //所在市州
					area = area.replace("（", "").replace("）", ""); //去除所在市州字符串中的括号
					var positionX = $(t).attr("data-X"); //纬度
					var positionY = $(t).attr("data-Y"); //经度
					var man = $(t).attr("data-man"); //负责人

					$("#boatMsgArea").show(); //显示信息层
					$("#bName").html(name);
					$("#areaName").html("所属市州：  " + area);
					$("#bAdmin").html("负责人：  " + man);
					$("#boatJumpToMap").attr("data-x", positionX);
					$("#boatJumpToMap").attr("data-y", positionY);
					$("#boatJumpToMap").attr("data-type", "3"); //类型：码头
				}

				//跳转至详细信息区域
				$("#boatMainMsgBtn").click();
			};

			//点击跳转至地图查看
			function boatJumpToMapShow(tt) {
				var position_x = $(tt).attr("data-x");
				var position_y = $(tt).attr("data-y");
				var boatP = position_x + "," + position_y;
				var msg = $("#bName").html() + "," + $("#areaName").html();
				var type = $(tt).attr("data-type");
				window.location.href = "show_map.html?boatP=" + boatP + "&MSG=" + type + msg; //所有船舶信息传入地图展示页
			}
		</script>
	</body>

</html>